<template>
    <div class="search-wrapper">
        <el-form :model="condition" ref="condition"  class="fx-1">
            <el-row>
                <el-col v-for=" item in conditionD" :span="item.size" :key="item.model">
                    <el-form-item :label="item.label" :prop="item.model">
                        <el-input v-if="item.type=='input'" clearable
                                  :placeholder="item.placeholder"
                                  v-model="condition[item.model]"></el-input>
                        <el-date-picker
                            v-if="item.type=='data'"
                            v-model="condition[item.model]"
                            type="date"
                            :placeholder="item.placeholder"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                        <el-select v-if="item.type=='select'&&(typeof(item.list)!='string')" placeholder="请选择"
                                   v-model="condition[item.model]">
                            <el-option
                                v-for="item in item.list"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
            <el-row>
                <el-button type="primary" size="large" @click="search">查询</el-button>
                <el-button size="large" @click="reset">重置</el-button>
             </el-row>


    </div>
</template>

<script>
    export default {
        name: "search",
        props: ["package","event"],
        data() {
            return {
                conditionD: [],
                condition: {},
                searchCondition: {}
            }
        },
        mounted() {
            console.log(this.package)
            Object.assign(this.conditionD, this.package)
            this.init()
        },
        activated() {
            this.init()
        },
        methods: {
            reset() {
                this.$refs.condition.resetFields();
            },

            search() {
                console.log(this.event)
                this.$emit(this.event,this.event,this.condition)
            },
            init() {
                this.conditionD.forEach( async item => {
                    if (item.url) {
                        //判断是否需要调接口
                        // this.getTag(item)
                        const res = await this.http[item.url.method](this.api[item.url.module][item.url.value])
                        if (res && res.code == 200) {
                            item.list = res.data.list
                        }
                        else {
                            this.$message.error(res.message)
                        }
                    }
                    this.$set(this.condition, item.model, '')
                })
            }
        }

    }
</script>

<style scoped>
    .fx-1{
        flex:1
    }
    .search-wrapper>div{
        display: flex;
        align-items: center;
    }

    /deep/ .el-form-item__content{
        display: flex;
        padding-right: 30px;
    }
    /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
        flex: 1;
    }
    /deep/ .el-form-item{
        margin-bottom:0 ;
    }
</style>
